<template>
  <ul class="text-card-list">
    <li class='clearfix' v-for="item in data" :key="item.dataId">
      <div class="wordIns fl">
        <div class="movieTitle" :title="item.name">
          <router-link :to="geneDetailRoute(item.dataId)" class="ellipsis-2">
            {{item.name}}
          </router-link>
        </div>
        <div class="movieSummary ellipsis-2"></div>
      </div>
      <div class="imgIns fr">
        <router-link :to="geneDetailRoute(item.dataId)">
          <img :src="item.img_url" :alt="item.name" :title="item.name" />
        </router-link>
      </div>
    </li>
  </ul>
</template>

<script>
  import {geneDetailRoute, fieldState} from "@/mixins"

  export default {
    name: "textCardList",
    mixins: [geneDetailRoute, fieldState],
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data() {
      return {

      }
    }
  }
</script>

<style scoped>
  .text-card-list li+li  {
    margin-top: 24px;
  }
  .text-card-list a.ellipsis-2 {
    display: -webkit-box;
  }
  img {
    width: 100%;
    height: 83px;
    display: inline-block;
  }
</style>
